import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Checkbox } from 'antd';
import { Link } from 'umi';
import { history } from 'umi';
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 8,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const Demo = (props) => {
  const { dispatch, keys } = props;

  const onFinish = (values) => {
    var key = String(Math.floor(Math.random() * 1000000)).padStart(6, '0');
    values['key'] = String(key);

    dispatch({
      type: 'employee/addEmployee',
      payload: {
        user: values,
      },
    }).then(() => {
      history.push('/employee');
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      {...layout}
      name="basic"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
  
      <Form.Item
        label="FirstName"
        name="firstName"
        rules={[
          {
            required: true,
            message: 'Please input your FirstName!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="LastName"
        name="lastName"
        rules={[
          {
            required: true,
            message: 'Please input your LastName!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Age"
        name="age"
        rules={[
          {
            message: 'Please input your Age!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Address"
        name="address"
        rules={[
          {
            message: 'Please input your Address!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

function Employee({
  match: {
    params: { id },
  },

  employee,
  dispatch,
}) {
  const [dataSourse, setDataSourse] = useState({});
  useEffect(() => {
    if (id != 'id') {
      dispatch({
        type: 'employee/selectById',
        payload: {
          key: id,
        },
      }).then((res) => {
        setDataSourse(res);
      });
    }
  }, [id]);

  function init(){
   
      dispatch({
      type: 'employee/selectById',
      payload: {
        key: id,
      },
    }).then((res) => {
      setDataSourse(res);
    })
  }
  return (
    <div>
     
   
      <Demo dispatch={dispatch} keys={dataSourse}></Demo>

      {/* <h1>Employee {id} 's Page</h1> */}
    </div>
  );
}

export default connect(({ employee }) => ({ employee }))(Employee);
